<!DOCTYPE html>
<html>
<head>
    <title>我的数据</title>
<#include "/common/include_header.ftl">
    <script src="/static/js/echarts.js"></script>
</head>
<body>

<#include "/common/include_top.ftl">

<div class="layui-container fly-marginTop fly-user-main">

<#include "/common/include_menu.ftl">

    <div class="site-tree-mobile layui-hide">
        <i class="layui-icon">&#xe602;</i>
    </div>
    <div class="site-mobile-shade"></div>

    <div class="site-tree-mobile layui-hide">
        <i class="layui-icon">&#xe602;</i>
    </div>
    <div class="site-mobile-shade"></div>


    <div class="fly-panel fly-panel-user" pad20>


        <div id="main" style="width: 600px;height:400px;"></div>


    </div>
</div>

<script>

    var myChart = echarts.init(document.getElementById('main'));
    // 显示标题，图例和空的坐标轴
    myChart.setOption({

    });

    myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

    var names=[];    //类别数组（实际用来盛放X轴坐标值）
    var valueA=[];    //销量数组（实际用来盛放Y坐标值）
    var valueB=[];    //销量数组（实际用来盛放Y坐标值）
    var valueC=[];    //销量数组（实际用来盛放Y坐标值）
    var valueD=[];    //销量数组（实际用来盛放Y坐标值）
    var valueE=[];    //销量数组（实际用来盛放Y坐标值）

    var obj=[];

    $.ajax({
        type : "post",
        async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url : "/json/data/${dataInfo.id}/info",    //请求发送到TestServlet处
        data : {},
        dataType : "json",        //返回数据形式为json
        success : function(rd) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            if (rd) {
                var result = rd.data;
                for(var i=0;i<result.length;i++){
                    names.push(result[i].name);    //挨个取出类别并填入类别数组
                }
            <#--if ("${dataInfo.valueA}" == "true") {-->
                for(var i=0;i<result.length;i++){
                    valueA.push(result[i].valueA);    //挨个取出销量并填入销量数组
                }


                for(var i=0;i<result.length;i++){
                    if (!hasNull(result[i].valueA, result[i].name)) {
                        obj.push({
                            value: parseFloat(result[i].valueA),
                            name: result[i].name
                        });    //挨个取出销量并填入销量数组
                    }
                }


            <#--if ("${dataInfo.valueB}) {-->
            <#--for(var i=0;i<result.length;i++){-->
            <#--value.push(result[i].valueB);    //挨个取出销量并填入销量数组-->
            <#--}-->
            <#--}-->
            <#--if (${dataInfo.valueC}) {-->
            <#--for(var i=0;i<result.length;i++){-->
            <#--value.push(result[i].valueC);    //挨个取出销量并填入销量数组-->
            <#--}-->
            <#--}-->
            <#--if ("${dataInfo.valueD}") {-->
            <#--for(var i=0;i<result.length;i++){-->
            <#--value.push(result[i].valueD);    //挨个取出销量并填入销量数组-->
            <#--}-->
            <#--}-->
            <#--if (${dataInfo.valueE}) {-->
            <#--for(var i=0;i<result.length;i++){-->
            <#--value.push(result[i].valueE);    //挨个取出销量并填入销量数组-->
            <#--}-->
            <#--}-->

                myChart.hideLoading();    //隐藏加载动画
                myChart.setOption({        //加载数据图表
                    backgroundColor: '#2c343c',

                    title: {
                        text: '${dataInfo.title}',
                        left: 'center',
                        top: 20,
                        textStyle: {
                            color: '#ccc'
                        }
                    },

                    legend: {
                        data:['${dataInfo.valueAName}']
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },

                    visualMap: {
                        show: false,
                        min: 80,
                        max: 600,
                        inRange: {
                            colorLightness: [0, 1]
                        }
                    },
                    series : [
                        {
                            name:'${dataInfo.valueAName}',
                            type:'pie',
                            radius : '55%',
                            center: ['50%', '50%'],
                            data:obj.sort(function (a, b) { return a.value - b.value; }),
                            roseType: 'radius',
                            label: {
                                normal: {
                                    textStyle: {
                                        color: 'rgba(255, 255, 255, 0.3)'
                                    }
                                }
                            },
                            labelLine: {
                                normal: {
                                    lineStyle: {
                                        color: 'rgba(255, 255, 255, 0.3)'
                                    },
                                    smooth: 0.2,
                                    length: 10,
                                    length2: 20
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#c23531',
                                    shadowBlur: 200,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            },

                            animationType: 'scale',
                            animationEasing: 'elasticOut',
                            animationDelay: function (idx) {
                                return Math.random() * 200;
                            }
                        }
                    ]
                });

            }

        },
        error : function(errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    })




</script>



<#include "/common/include_footer.ftl">
<#include "/common/include_js.ftl">
</body>
</html>